<template>
    <div class="addDengji">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>项目申报</el-breadcrumb-item>
            <el-breadcrumb-item>项目备案登记</el-breadcrumb-item>
            <el-breadcrumb-item>{{id?'编辑':'新增'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="addContainer">
            <h3 class="title">
                <i></i>
                基本信息
            </h3>
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="150px"
                class="addForm"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="projectName">
                            <el-autocomplete
                                class="inline-input"
                                v-model="ruleForm.projectName"
                                :fetch-suggestions="nameSearch"
                                placeholder="请输入项目名称"
                                @select="handleSelect"
                            >
                                <template slot-scope="{ item }">
                                    <div class="name">{{ item.projectName }}</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目编号" prop="projectNo">
                            <el-autocomplete
                                class="inline-input"
                                v-model="ruleForm.projectNo"
                                :fetch-suggestions="numSearch"
                                placeholder="请输入项目编号"
                                @select="handleSelect"
                            >
                                <template slot-scope="{ item }">
                                    <div class="name">{{ item.projectName }}</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目编码" prop="uniqueCityCode">
                            <el-input placeholder="请输入项目概算" v-model="ruleForm.uniqueCityCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资金来源" prop="capitalSource">
                            <el-select v-model="ruleForm.capitalSource" placeholder="请选择资金来源">
                                <el-option label="民政局" value="民政局"></el-option>
                                <el-option label="公安局" value="公安局"></el-option>
                                <el-option label="财政局" value="财政局"></el-option>
                                <el-option label="国税局" value="国税局"></el-option>
                                <el-option label="土地局" value="土地局"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目金额" prop="projectBudget">
                            <el-input placeholder="请输入项目概算" v-model="ruleForm.projectBudget"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目类型" prop="projectCategoryName">
                            <el-select v-model="ruleForm.projectCategoryName" placeholder="请选择项目类型">
                                <el-option label="全市发展规划" value="1"></el-option>
                                <el-option label="专项发展规划" value="2"></el-option>
                                <el-option label="软件开发" value="3"></el-option>
                                <el-option label="系统集成" value="4"></el-option>
                                <el-option label="民政局" value="5"></el-option>
                                <el-option label="公安局" value="6"></el-option>
                                <el-option label="财政局" value="7"></el-option>
                                <el-option label="国税局" value="8"></el-option>
                                <el-option label="土地局" value="9"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目开始时间" prop="name">
                            <el-date-picker
                                v-model="ruleForm.planBeginTime"
                                align="right"
                                type="date"
                                placeholder="请选择开始时间"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目结束时间" prop="name">
                            <el-date-picker
                                v-model="ruleForm.planEndTime"
                                align="right"
                                type="date"
                                placeholder="请选择结束时间"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                      <el-col :span="12">
                        <el-form-item label="供应商名称" prop="projectContact">
                            <el-input placeholder="请输入供应商名称" v-model="ruleForm.projectContact"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目联系人" prop="projectContact">
                            <el-input placeholder="请输入项目联系人" v-model="ruleForm.projectContact"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目联系人电话" prop="projectContactMobile">
                            <el-input
                                placeholder="请输入项目联系人电话"
                                v-model="ruleForm.projectContactMobile"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="fileList">
                        <el-form-item label="合同附件" prop="name">
                            <el-upload
                                :before-remove="removeFile"
                                :data="{fileType: 22}"
                                name="multipartFiles"
                                class="upload-demo"
                                :action="$config.API_URL + '/file/upload'"
                                :on-change="handleChange"
                                :file-list="fileList"
                                :limit="1"
                            >
                                <div class="uploadContent">
                                    <div class="uploadBox">
                                        <i class="el-icon-plus"></i>
                                        <span>上传附件</span>
                                    </div>
                                    <div
                                        slot="tip"
                                        class="el-upload__tip"
                                    >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="fileList">
                        <el-form-item label="建设内容">
                            <el-input
                                :rows="5"
								resize="none"
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="ruleForm.remark"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="operateBtn">
            <el-button type="primary" @click="submitForm('ruleForm', 102)">提交</el-button>
            <el-button plain @click="submitForm('ruleForm', 101)">保存</el-button>
            <el-button plain @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    }
                ]
            },
            ruleForm: {
                projectName: "",
                fileType: 22,
                attachmentId: null,
                type: 2
            },
            id: null,
            rules: {
                projectName: [
                    {
                        required: true,
                        message: "请输入项目名称",
                        trigger: "blur"
                    }
                ],
                projectNo: [
                    {
                        required: true,
                        message: "请输入项目编号",
                        trigger: "blur"
                    }
                ],
                capitalSource: [
                    {
                        required: true,
                        message: "请选择资金来源",
                        trigger: "change"
                    }
                ],
                projectCategoryName: [
                    {
                        required: true,
                        message: "请选择项目类型",
                        trigger: "change"
                    }
                ],
                projectBudget: [
                    {
                        required: true,
                        message: "请输入项目概算",
                        trigger: "blur"
                    }
                ],
                uniqueCityCode: [
                    {
                        required: true,
                        message: "请输入项目编码",
                        trigger: "blur"
                    }
                ],
                projectContact: [
                    {
                        required: true,
                        message: "请输入项目联系人",
                        trigger: "blur"
                    }
                ],
                projectContactMobile: [
                    {
                        required: true,
                        message: "请输入项目联系人电话",
                        trigger: "blur"
                    }
                ]
            },
            fileList: []
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id) {
            this.getDetail();
        }
    },
    methods: {
        getDetail() {
            this.axios
                .get("/projectProcess/getOne", { params: { id: this.id } })
                .then(res => {
                    this.ruleForm = res.data;
                });
        },
        nameSearch(queryString, cb) {
            this.axios
                .get("/projectProcess/getIsReviewStatus", {
                    params: {
                        projectName: queryString,
                        pageNum: 1,
                        pageSize: 10000
                    }
                })
                .then(res => {
                    cb(res.data);
                });
        },
        numSearch(queryString, cb) {
            this.axios
                .get("/projectProcess/getIsReviewStatus", {
                    params: {
                        projectNo: queryString,
                        pageNum: 1,
                        pageSize: 10000
                    }
                })
                .then(res => {
                    cb(res.data);
                });
        },
        // 选中数据
        handleSelect(item) {
            this.ruleForm = item;
        },
        // 提交表单
        submitForm(formName, status) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.ruleForm.type = 2;
                    this.ruleForm.currentState = status;
                    this.axios
                        .post("/projectProcess/update", this.ruleForm)
                        .then(res => {
							if(res.data.code == 1000) {
	                            this.$router.push({ name: "chushe" });
							}
                        });
                } else {
                    this.$message.error("请填写带*的必填项！");
                    return false;
                }
            });
        },
        // 取消
        cancel() {
            this.$router.go(-1);
        },
        handleChange(file, fileList) {
            if (file.response) {
                this.ruleForm.attachmentId = file.response.data.attachmentId;
                this.ruleForm.fileType = file.response.data.fileType;
            }
        },
        removeFile(file) {
            this.ruleForm.attachmentId = null;
            this.ruleForm.fileType = null;
        }
    }
};
</script>

<style lang="less" scoped>
.addDengji {
    .addContainer {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .addForm {
            .el-row {
                border: 1px solid rgba(238, 238, 238, 1);
                border-bottom: none;
                .el-col {
                    border-bottom: 1px solid rgba(238, 238, 238, 1);
                }
            }
            .el-select,
            .el-input {
                width: 100%;
            }
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            i {
                width: 4px;
                height: 16px;
                display: inline-block;
                background-color: #4967cf;
                margin-right: 6px;
            }
        }
    }
    .operateBtn {
        text-align: center;
        padding-top: 30px;
        .el-button--small {
            padding: 9px 30px;
        }
    }
    .fileList {
		.uploadContent {
			display: flex;
		}
        .uploadBox {
            width: 114px;
            height: 58px;
            border-radius: 4px;
            border: 2px dashed rgba(160, 179, 244, 1);
            display: flex;
			flex-direction: column;
			margin-right: 10px;
            .el-icon-plus {
                font-size: 26px;
				color: #4967cf;
				font-weight: 900;
            }
        }
        .upload-demo {
            padding: 11px 16px;
            width: 600px;
        }
    }
}
</style>
<style lang="less">
.addForm {
    .el-form-item {
        margin-bottom: 0;
    }
    .el-input {
        height: 40px;
        line-height: 40px;
    }
    .el-input__inner,
    .el-textarea__inner {
        border: none !important;
    }
    .el-form-item__label {
        background-color: #fafafa;
        min-height: 40px;
        line-height: 40px;
    }
    .fileList {
        .el-form-item__label {
            min-height: 120px;
        }
    }
    .el-form-item__error {
        display: none;
    }
}
</style>
